<template>
     <ul class="home-Typelist">
        <li v-for="(item,index) in Typelist" :key="index" :class="`${currentIndex == index ? 'active' : ''} itemType`" @click="nameSelect(item,index)">
            {{item.msg}}
            <p></p>
        </li>
     </ul>
</template>

<script>
export default {
    data(){
        return{
            currentIndex:0,
          Typelist:[{
          msg: "潮款爆鞋",
        },
        {
          msg: "人气潮服",
        },
        {
          msg: "潮流鞋包",
        },
        {
          msg: "潮流美妆",
        },]
        }
    },
    methods:{
        nameSelect(item,index){
            this.currentIndex = index;
        }
    }

}
</script>

<style scoped>
.home-Typelist{
    display: flex;
    padding-left: 00.14rem;
}
.home-Typelist .active{
    font-size: 0.18rem;font-weight: bold;
}
.home-Typelist .active p{
    height: 0.04rem;background-color: aqua;width: 0.28rem;margin: auto;
}
.itemType{
   font-size: 0.14rem; line-height: 00.3rem;text-align: center;
   margin: 0 0.06rem;
}
</style>